﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>最新主题/投资日历左右布局</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        body {
            background-color: #121212;
            color: #e0e0e0;
            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            overflow-x: hidden;
        }
        .column-header {
            padding: 12px 0;
            text-align: center;
            color: #ff3b30;
            font-weight: bold;
            position: relative;
            margin-bottom: 10px;
        }
        .column-header::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: #ff3b30;
        }
        .date-header {
            background-color: #1e1e1e;
            padding: 10px 15px;
            font-size: 14px;
            color: #ff9500;
        }
        .theme-item {
            border-bottom: 1px solid #2c2c2c;
            padding: 15px 0;
        }
        .stock-tag {
            display: inline-block;
            padding: 3px 6px;
            margin: 4px;
            border-radius: 3px;
            background-color: #222;
            font-size: 13px;
            cursor: pointer;
        }
        .stock-tag:hover {
            background-color: #333;
        }
        .green {
            color: #4cd964;
        }
        .red {
            color: #ff3b30;
        }
        .event-tag {
            background-color: #ff3b30;
            color: white;
            border-radius: 5px;
            padding: 2px 8px;
            font-size: 12px;
            margin-right: 8px;
        }
        .calendar-item {
            padding: 12px 15px;
            border-bottom: 1px solid #2c2c2c;
        }
        .column {
            overflow-y: auto;
            height: calc(100vh - 40px);
            width: calc(50% - 1px);
        }
        
        .column::-webkit-scrollbar {
            width: 0;
            display: none;
        }
        .column {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        
        .vertical-divider {
            width: 2px;
            background-color: #333;
            height: calc(100vh - 40px);
        }
        
        .layout-container {
            display: flex;
            flex-direction: row;
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="container mx-auto px-2 py-2">
        <div class="layout-container">
            <div class="column pr-2">
                <div class="column-header">最新主题</div>
                <div id="theme-content">
                    <div class="text-center py-4">
                        <div class="animate-spin inline-block w-6 h-6 border-2 border-current border-t-transparent text-gray-400 rounded-full"></div>
                        <p class="mt-2 text-gray-400">加载中...</p>
                    </div>
                </div>
            </div>
            
            <div class="vertical-divider"></div>
            
            <div class="column pl-2">
                <div class="column-header">投资日历</div>
                <div id="calendar-content">
                    <div class="text-center py-4">
                        <div class="animate-spin inline-block w-6 h-6 border-2 border-current border-t-transparent text-gray-400 rounded-full"></div>
                        <p class="mt-2 text-gray-400">加载中...</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        const THEME_API = 'https://apparticle.longhuvip.com/w1/api/index.php?apiv=w39&PhoneOSNew=2&VerSion=5.18.0.1&c=ThemeNews&a=GetList&Type=-1&st=50&Index=0&UserID=512768&Token=a760816a413e45acedae2ddc2e60aa81&DeviceID=4997be9fdca1487d7f27541db1d0fd75460d05062';
        const CALENDAR_API = 'https://apparticle.longhuvip.com/w1/api/index.php?apiv=w39&PhoneOSNew=2&VerSion=5.18.0.1&c=ThemeNews&a=GetList&Type=3&st=50&Index=0&UserID=512768&Token=a760816a413e45acedae2ddc2e60aa81&DeviceID=4997be9fdca1487d7f27541db1d0fd75460d05062';
        
        const themeContent = document.getElementById('theme-content');
        const calendarContent = document.getElementById('calendar-content');
        
        function formatTimestamp(timestamp) {
            const date = new Date(timestamp * 1000);
            const year = date.getFullYear();
            const month = date.getMonth() + 1;
            const day = date.getDate();
            const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
            return {
                formattedDate: `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`,
                weekday: weekdays[date.getDay()],
                monthDay: `${month}月${day}日`,
                time: `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`
            };
        }
        
        function groupThemesByDate(themes) {
            const grouped = {};
            
            themes.forEach(theme => {
                const dateInfo = formatTimestamp(theme.TimeStamp);
                const dateKey = dateInfo.formattedDate;
                
                if (!grouped[dateKey]) {
                    grouped[dateKey] = {
                        date: dateInfo,
                        items: []
                    };
                }
                
                grouped[dateKey].items.push(theme);
            });
            
            return Object.values(grouped).sort((a, b) => {
                return new Date(b.date.formattedDate) - new Date(a.date.formattedDate);
            });
        }
        
        async function fetchLatestThemes() {
            try {
                const response = await fetch(THEME_API);
                const data = await response.json();
                renderThemes(data.List);
            } catch (error) {
                themeContent.innerHTML = `
                    <div class="text-center py-4">
                        <p class="text-red-500">获取数据失败</p>
                        <p class="text-gray-400 text-sm mt-2">${error.message}</p>
                        <button class="mt-3 px-4 py-2 bg-gray-800 text-white rounded" onclick="fetchLatestThemes()">重试</button>
                    </div>
                `;
            }
        }
        
        function renderThemes(themes) {
            const groupedThemes = groupThemesByDate(themes);
            let html = '';
            
            groupedThemes.forEach(group => {
                html += `
                    <div class="date-header">
                        ${group.date.formattedDate.substring(5)} 星期${group.date.weekday}
                    </div>
                `;
                
                group.items.forEach(theme => {
                    const dateInfo = formatTimestamp(theme.TimeStamp);
                    
                    html += `
                        <div class="theme-item">
                            <div class="mb-1">
                                ${theme.Kword ? `<span class="text-blue-400">${theme.Kword}</span>` : ''}
                                <span class="float-right text-gray-400">${dateInfo.time}</span>
                            </div>
                            <div class="text-base mb-2">${theme.Title}</div>
                            <div class="flex flex-wrap">
                                ${theme.Stocks.map(stock => `
                                    <div class="stock-tag" onclick="window.location.href='http://www.treeid/code_${stock.Code}'">
                                        ${stock.Name} 
                                        <span class="${stock.Rate > 0 ? 'red' : 'green'}">
                                            ${stock.Rate > 0 ? '+' : ''}${stock.Rate}%
                                        </span>
                                    </div>
                                `).join('')}
                            </div>
                        </div>
                    `;
                });
            });
            
            themeContent.innerHTML = html || '<div class="text-center py-4 text-gray-400">暂无数据</div>';
        }
        
        async function fetchInvestmentCalendar() {
            try {
                const response = await fetch(CALENDAR_API);
                const data = await response.json();
                renderCalendar(data.List);
            } catch (error) {
                calendarContent.innerHTML = `
                    <div class="text-center py-4">
                        <p class="text-red-500">获取数据失败</p>
                        <p class="text-gray-400 text-sm mt-2">${error.message}</p>
                        <button class="mt-3 px-4 py-2 bg-gray-800 text-white rounded" onclick="fetchInvestmentCalendar()">重试</button>
                    </div>
                `;
            }
        }
        
        function groupCalendarByDate(items) {
            const grouped = {};
            
            items.forEach(item => {
                const dateParts = item.Date.split('-');
                const dateKey = item.Date;
                const monthDay = `${parseInt(dateParts[1])}月${parseInt(dateParts[2])}日`;
                
                if (!grouped[dateKey]) {
                    grouped[dateKey] = {
                        date: item.Date,
                        monthDay: monthDay,
                        items: []
                    };
                }
                
                grouped[dateKey].items.push(item);
            });
            
            return Object.values(grouped).sort((a, b) => {
                return new Date(a.date) - new Date(b.date);
            });
        }
        
        function renderCalendar(items) {
            const groupedItems = groupCalendarByDate(items);
            let html = '';
            
            groupedItems.forEach(group => {
                const dateParts = group.date.split('-');
                const year = dateParts[0];
                const month = parseInt(dateParts[1]);
                const day = parseInt(dateParts[2]);
                
                const date = new Date(year, month - 1, day);
                const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
                const weekday = weekdays[date.getDay()];
                
                html += `
                    <div class="date-header text-white">
                        ${month}月${day}日 星期${weekday}
                    </div>
                `;
                
                group.items.forEach(item => {
                    html += `
                        <div class="calendar-item">
                            <div>
                                <span class="event-tag">${item.TagName}</span>
                                ${item.Brief}
                            </div>
                        </div>
                    `;
                });
            });
            
            calendarContent.innerHTML = html || '<div class="text-center py-4 text-gray-400">暂无数据</div>';
        }
        
        fetchLatestThemes();
        fetchInvestmentCalendar();
    </script>
</body>
</html>